<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

        <el-form-item prop="operationPicture" :label="$t('qms.operationScreen')">
          <el-select v-model="state.queryForm.operationPicture" filterable clearable clear-icon="CloseBold" style="width: 200px">
                                <el-option v-for="item in operationPictureType" :key="item.operationPicture" :label="item.operationPicture"
                                    :value="item.operationPicture" />
                            </el-select>
        </el-form-item>
        <el-form-item prop="warehouseName" :label="$t('pda.operatingTime')">
          <el-date-picker style="width: 250px"
                          v-model="state.queryForm.time"
                          type="daterange"
                          @change="changeCheckTime"
                          range-separator="To"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          :start-placeholder="$t('iot.startTime')"
                          :end-placeholder="$t('iot.endTime')"/>
        </el-form-item>
        <el-form-item prop="inputParameter" :label="$t('pad.incomingParameter')">
          <el-input v-model="state.queryForm.inputParameter" clearable :placeholder="$t('pad.incomingParameter')"/>
        </el-form-item>
        <el-form-item prop="returnParameter" :label="$t('qms.returnParameter')">
          <el-input v-model="state.queryForm.returnParameter" clearable :placeholder="$t('qms.returnParameter')"/>
        </el-form-item>
        <el-form-item prop="callInterface" :label="$t('pad.callingInterface')">
          <el-input v-model="state.queryForm.callInterface" clearable :placeholder="$t('pad.callingInterface')"/>
        </el-form-item>
        <el-form-item prop="isPass" :label="$t('pad.isY')">
          <el-select v-model="state.queryForm.isPass" :placeholder="$t('pad.isY')" style="width: 100px"
                     clearable>
            <el-option v-for="item in isPassList" :key="item.value" :label="item.name" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getDataList">{{ $t('btn.search') }}</el-button>
          <el-button icon="refresh"  @click="resetQuery">{{ $t('btn.reset') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="state.dataList" v-loading="state.loading" border
                :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
                :row-class-name="tableRowClassName"
                @sort-change="sortChangeHandle">
        <el-table-column type="index" label="#" width="80"  fixed="left"/>
        <el-table-column width="120" prop="operationPicture" :label="$t('qms.operationScreen')" show-overflow-tooltip/>
        <el-table-column width="160" prop="operationTime" :label="$t('pda.operatingTime')" show-overflow-tooltip/>
        <el-table-column width="80" prop="operationUserNo" :label="$t('pad.operator')" show-overflow-tooltip/>
        <el-table-column width="100" prop="operationType" :label="$t('iot.operationType')" show-overflow-tooltip>
          <template #default="scope">
            <el-tag effect="plain" type="primary">{{scope.row.operationType}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="350" prop="callInterface" :label="$t('pad.callingInterface')" show-overflow-tooltip/>
        <el-table-column width="150" prop="module" :label="$t('pad.module')" show-overflow-tooltip/>
        <el-table-column width="150" prop="source" :label="$t('pda.source')" show-overflow-tooltip/>
        <!-- <el-table-column prop="requestStartTime" label="请求开始时间"  show-overflow-tooltip/>
        <el-table-column prop="requestEndTime" label="请求结束时间"  show-overflow-tooltip/> -->
        <el-table-column  width="150" prop="isPass" :label="$t('pad.isY')" show-overflow-tooltip>
          <template #default="scope">
            <el-tag effect="plain" :type="scope.row.isPass == 'Y' ? 'success':'danger' ">{{scope.row.isPass}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column  width="100" prop="responseCode" :label="$t('pad.responseCode')" show-overflow-tooltip>
          <template #default="scope">
            <el-tag  :type="scope.row.responseCode == '0' ? 'success':'danger' ">{{scope.row.responseCode}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="180"  prop="errorMessage" :label="$t('pda.errorMessage')" show-overflow-tooltip/>
        <el-table-column  width="160" prop="creationTime" :label="$t('pad.requestTime')" show-overflow-tooltip/>
        <el-table-column  :label="$t('operation.Operation')" width="150" fixed="right">
          <template #default="scope">
            <el-button icon="view" type="primary" plain @click="formDialogRef.openDialog(scope.row.id)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
    </div>

    <!-- 编辑、新增  -->
    <form-dialog ref="formDialogRef" @refresh="getDataList(false)"/>

  </div>
</template>

<script setup lang="ts" name="systemBasOperationLog">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {fetchList, delObjs,GetOperationpictures} from "/@/api/platform/digital/basOperationLog";
import {useMessage, useMessageBox} from "/@/hooks/message";

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
// 定义查询字典

// 定义变量内容
const formDialogRef = ref()
const isPassList = ref([
  {name: "Y", value: "Y"},
  {name: "N", value: "N"}
])
// 搜索变量
const queryRef = ref()
const showSearch = ref(true)
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: fetchList
})

const tableRowClassName = ({row}) => {
  if (row.isPass == 'N') {
    return 'warning-row'
  }
}

//  table hook
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  downBlobFile,
  tableStyle
} = useTable(state)

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  state.queryForm = {}
  // 清空多选
  selectObjs.value = []
  getDataList(false)
}

// 导出excel
const exportExcel = () => {
  downBlobFile('/digital/basOperationLog/export', Object.assign(state.queryForm, {ids: selectObjs}), 'basOperationLog.xlsx')
}


//时间点击
const changeCheckTime = (data) => {
  if (!data){
    state.queryForm.starTime = '';
    state.queryForm.endTime = '';
  }else {
    state.queryForm.starTime = data[0]
    state.queryForm.endTime = data[1]
  }

}

// 删除操作
const handleDelete = async (ids: string[]) => {
  try {
    await useMessageBox().confirm(t('operation.permanentDeletion'));
  } catch {
    return;
  }

  try {
    await delObjs(ids);
    getDataList();
    useMessage().success(t('sop.successfullyDeleted'));
  } catch (err: any) {
    useMessage().error(err.msg);
  }
};
const operationPictureType = ref([])
onMounted(() => {
  GetOperationpictures().then(res => {
      operationPictureType.value = res.data
    })
})
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-danger-light-5);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>